.Contacts{
   width:100%;
   height:100%;
   .ContactsBox{
   	  float:left;
   	  width:260px;
   	  height:100%;
   	  min-height:638px;
   	  border-right:1px solid #e1e2e6;
   	  background:#f0f2f5;
      user-select:none;
   	  .ChatSerch{
   	  	padding:19px 11px 11px 12px;
   	  	input{
          display:none;
      		width: 197px;
      		height: 40px;
      		padding:0 10px 0 30px;
      		font-size: 12px;
      		font-family: "Microsoft YaHei";
      		color:#666;
      		border:0;
      		outline:none;
      		background:rgb(229,231,233) url(../../images/icon.png) no-repeat 10px center;
   	  	}
   	  }

   	  .ChatList{
   	  	width:100%;
   	  	height:auto;
        .title{
        	position:relative;
        	height:21px;
        	padding-left:35px;
			font-size: 14px;
			font-family: "Microsoft YaHei";
			color: rgb(64, 64, 64);
			cursor:pointer;
			user-select:none;
			-webkit-user-select:none;
			&::before{
				position:absolute;
				content:'';
				left:13px;
				top:6px;
				width: 0; 
				height: 0; 
				border-left: 5px solid transparent; 
				border-right: 5px solid transparent; 
				border-bottom: 7px solid #909090;
			}
        }
        .titleB{
        	&::before{
				top:6px; 
				border-top: 7px solid #909090;
				border-bottom:none;
			}
        }
        ul{
          width:100%;
   	  	  height:auto;
          // min-height:568px;
   	  	}
   	  	li{
          height:42px;
          padding:11px 12px;
          cursor:pointer;
          &:hover,&.current{
            background:#dee2e7;
          }
          &:active{
          	background:#d0d5d8;
          }
          .userHd{
          	position:relative;
          	float:left;
          	width:42px;
          	height:42px;
          	margin-right:10px;
          	.userHdImg{
              position:relative;
          		width:42px;
          		height:42px;
          		border-radius:50%;
          		overflow:hidden;
          		background:#999;
          		img{
          			// width:100%;
          			max-height:100%;
                position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%,-50%);transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
          		}
          	}
          	.onlineState{
          		position:absolute;
          		right:0;
          		bottom:0;
          		width:12px;
          		height:9px;
          	}
          	.online_game{
          		background:url(../../images/icon_game.png) no-repeat center;
          	}
          }
          .userInfo{
          	float:left;
          	width:179px;
          	height:100%;
          	div{
          		width:100%;
          		height:21px;
          		line-height:21px;
          	}
          	.name{
          		width:140px;
      				font-size: 14px;
      				font-family: "Microsoft YaHei";
      				color: rgb(64, 64, 64);
          	}
          	.userMessageNum{
              float:right;
              display:inline-block;
              font-size: 11px;
              min-width: 10px;
              height: 20px;
              padding:0 5px;
              text-align:center;
              font-family: "Arial";
              color: rgb(255, 255, 255)!important;
              border-radius: 20px;
              background-color: rgb(247, 76, 49);
          	}
          	.oneMessage{
          		width:144px;
      				font-size: 12px;
      				font-family: "Microsoft YaHei";
      				color: rgb(128, 128, 128);
          	}
          	.userInfoTime{
      				font-size: 12px;
      				font-family: "Arial";
      				color: rgb(179, 179, 179);
          	}
          	.textHidden{
          		display:inline-block;
      				text-overflow: ellipsis;
      				overflow: hidden;
      				white-space: nowrap;
          	}
          }
   	  	}
        .offline{
          img{
             -webkit-filter: grayscale(95%);
          }
          div,span{
            color: rgb(179, 179, 179) !important;
          }
        }
        .overflow{
        	overflow:hidden;
	   	  	overflow-y:auto;
	        &::-webkit-scrollbar{
	           width: 5px;     
	           height: 4px;
	        }
	        &::-webkit-scrollbar-thumb {
	            border-radius: 5px;
	            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	            background: rgba(0,0,0,0.2);
	        }
	        &:hover{
	          &::-webkit-scrollbar-track {
	              -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	              border-radius: 0;
	              background: rgba(0,0,0,0.1);
	          }
	        }
        }
        .addContactsList{
        	max-height:128px;
        }
        .myFriendsList{
        	min-height:388px;
        	padding: 5px 0;
        }
        .myFriendsList .userInfo .userInfoA{
          	height:100%;
          	line-height:42px;
         }
   	  }
   }
}

